
<html>

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Rectangle Overlay</title> 
 
    <style type="text/css"> 
      #map {
        width: 800px;
        height: 600px;
      }
      /* footer section */

footer{

   text-align:center;

    color:#979590;

    font-size:18px;

}

#thumbs img{
		top:-21px;
		left:-30px;	
	}	
      
    </style> 
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
    <script type="text/javascript"> 
      // Global variables
      var side_bar_html = "Amigos logados no momento<br>";
       var right_bar_html = "";
      var map;
      var marker1 = new Array();
      var contador = 0;
      var longitude = new Array();
      var latitude = new Array();
 	  var tituloMarca = new Array();
 	  var image = new Array(); 
 	  var imagetrigger = new Array();
 	  var infoWindow = new google.maps.InfoWindow;

      var onMarkerClick = function() {
      var marker = this;
      var latLng = marker.getPosition();
      infoWindow.setContent('<form action="@{Cadastro.salvar(estabelecimento)}"><input type="hidden" id="codigo" name="estabelecimento.est_codigo" value="${estabelecimento?.est_codigo}">Nome do Estabelecimento<input type="text" id="nome" name="estabelecimento.est_nome" value="${estabelecimento?.est_nome}"/><input type="submit" value="cadastrar" /><br/>'+
      'Descrição<input type="text" name="estabelecimento.est.descricao" value=""><input type="hidden" id="latitude" name="estabelecimento.est_lat" value='+ latLng.lat() +'><input type="hidden" id="longitude" name="estabelecimento.est_lon" value='+ latLng.lng() +'></form>');

      infoWindow.open(map, marker);
    };
 	  
 	  function saveData() {
      var name = escape(document.getElementById("nome").value);
      

      GDownloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
          marker.closeInfoWindow();
          document.getElementById("message").innerHTML = "Location added.";
        }
      });
    }
 	  /**
       * Called on the initial page load.
       */
      function init() {
        map = new google.maps.Map(document.getElementById('map'), {
          'zoom': 12,
          'center': new google.maps.LatLng(-3.85,-38.65),
          'mapTypeId': google.maps.MapTypeId.ROADMAP
        });
    
      }
      
        function diminuiImagem(nome){
	nome.width = 30;
	nome.height = 30;			
     }
     
      function a(inteiro) {
      for (i=1;i<2;i++){
       if (i%4==0)
       side_bar_html += '<a href="javascript:myclick(' + i + ')"><img onload="diminuiImagem('+tituloMarca[i]+');" name='+tituloMarca[i]+' src='+ imagetrigger[i]+'/> </a><br/>';
       else
       side_bar_html += '<a href="javascript:myclick(' + i + ')"><img onload="diminuiImagem('+tituloMarca[i]+');" name='+tituloMarca[i]+' src='+ imagetrigger[i]+'/> </a>';
       
       marker1[i] = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(latitude[i],longitude[i]),
          draggable: true,
          icon: image[i],
          title: tituloMarca[i]
        });
        google.maps.event.addListener(marker1[i], 'click', onMarkerClick);
        }
        document.getElementById("right").innerHTML = side_bar_html;
        return inteiro;
        
        }
      
       function myclick(i) {
        google.maps.event.trigger(marker1[i],"click");
      }
    
    
      function aumentaImagem(nome){
	nome.width = 50;
	nome.height = 50;			
     }
   
      // Register an event listener to fire when the page finishes loading.
      google.maps.event.addDomListener(window, 'load', init);
    </script> 
  </head> 

<body style="margin: 0px;padding: 0px; font-style: courier" onunload="GUnload()">

  <div style="width: 100%;height: 100%">

     <div style="float: left; width: 100%; height: 12%;background-color:#5CB3FF;">
           <center>  #{if user?.usu_codigo}
    <a href="@{Application.logout()}" class="${request.action =~ /index/ ? 'selected' : ''}">Logout | ${user.usu_nome}</a>
    #{/if}
</center>
<a href="" ><img style="float: center; width: 148;height: 60" src="http://static.freepik.com/fotos-gratis/estilo-de-timmy-aqua-botao_17-515171247.jpg"></a>
<img style="float: center; width: 148;height: 60" src="http://static.freepik.com/fotos-gratis/estilo-de-timmy-aqua-botao_17-515171247.jpg">
<img style="float: center; width: 148;height: 60" src="http://static.freepik.com/fotos-gratis/estilo-de-timmy-aqua-botao_17-515171247.jpg">
<img style="float: center; width: 148;height: 60" src="http://static.freepik.com/fotos-gratis/estilo-de-timmy-aqua-botao_17-515171247.jpg">
<img style="float: center; width: 148;height: 60" src="http://static.freepik.com/fotos-gratis/estilo-de-timmy-aqua-botao_17-515171247.jpg">
<img style="float: center; width: 148;height: 60" src="http://static.freepik.com/fotos-gratis/estilo-de-timmy-aqua-botao_17-515171247.jpg">
<img style="float: center; width: 148;height: 60" src="http://static.freepik.com/fotos-gratis/estilo-de-timmy-aqua-botao_17-515171247.jpg">
<img style="float: center; width: 148;height: 60" src="http://static.freepik.com/fotos-gratis/estilo-de-timmy-aqua-botao_17-515171247.jpg">
<img style="float: center; width: 148;height: 60" src="http://static.freepik.com/fotos-gratis/estilo-de-timmy-aqua-botao_17-515171247.jpg">
     </div>	

     <div  style="float: left; width: 100%;height: 80%">			

         <span id="left" style="float: left; width: 15%; height: 100%;background-color:#D9E6F7;">

             <center> <img src="${user.usu_caminho_imagem}"   BORDER=1 />  <b style=" color:#979590;">${user.usu_nome}</b><br>
             <br>
             <a href="" style="text-decoration:none;color:#279590;"> Amigos(${qtdAmigos})</a>
</center>
         </span>

         <span id="map" style="float: left;width: 70%;height: 100%;">

          

         </span>

         <span id="right" style="float: right; width: 15%; height: 100%;background-color:#D9E6F7;">
				Amigos logados no momento
          

         </span>			

     </div>
#{list items:contacts, as:'product'}
        
		
    <script>
    contador = contador + 1;
    imagetrigger[contador] = "${product.est_logo}" ;
    longitude[contador] = ${product.est_lon};
    latitude[contador] = ${product.est_lat};
    tituloMarca[contador] = '${product.est_nome}';
    image[contador] = new google.maps.MarkerImage('${product.est_logo}',
      new google.maps.Size(45, 52),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
       
   
    </script> 
#{/list}
<script>
 google.maps.event.addDomListener(window, 'load', a);
 </script>
     <div id="footer"  style="float: left; width: 100%; height: 8%;background-color:#D9E6F7;">
<footer >
<br>
       Prime Technology
</footer>
     </div>			

   </div>

</body>

</html>